<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>同城配送订单</title>
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"
          name="viewport">
    <link rel="stylesheet" href="statics/css/main.css">
    <link rel="stylesheet" href="statics/css/iview.css">
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="statics/libs/html5shiv.min.js"></script>
    <script src="statics/libs/respond.min.js"></script>
    <![endif]-->
    <style>
        body {
            margin: 0;
            background: RGBA(243, 243, 245, 1);
            font-family: 思源黑体;
            font-size: 0.5rem;
        }

        .main-tox {
            margin-bottom: 1rem;
            padding: 0.7rem;
            border-radius: 10px;
            background: #ffffff;
            display: flex;
            flex-direction: column;
        }

        .ding_dan {
            margin-bottom: 1rem;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
        }

        .ding_dan h4 {
            margin: 0.3rem;
        }

        .xiang_qing {
            margin-top: 0;
            margin-bottom: 1rem;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
        }

        .xiang_qing img {
            margin-right: 1rem;
            border-radius: 10px;
        }

        .jia {
            display: flex;
            flex-direction: column;
        }

        .jin {
            float: right;
            display: flex;
            justify-content: space-between;
            flex-direction: row;
        }

        .head-box {
            background: #ffffff;
            width: 100vw;
            height: 13vh;
        }

        .body-box {
            padding: 0.5rem;
        }

        .li-box {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            font-size: 0.875rem;
            font-weight: bold;
            color: RGBA(115, 115, 115, 1)
        }

        .l {
            color: RGBA(148, 95, 122, 1);
        }
    </style>
</head>
<body>
<div id="loginBox">
    <div class="head-box">
        <div style="font-size: 1rem;font-weight: bold;margin-left: 0.5rem;display: flex;flex-direction: row;">
            <div style="margin-top: 0.5rem" @click="fan()"><img src="arrow_left.svg" width="24px" height="24px"></div>
            <div style="margin: 0.5rem">同城配送订单</div>
        </div>
        <div class="li-box">
            <div style="margin: 0.7rem;" v-for="(item,index) in tabList" :key="index" :class="{'l':item.id==currentTab}"
                 @click="getOrder(item.id)" v-cloak>
                {{item.value}}
            </div>
        </div>
    </div>
    <div class="body-box">
        <div class="main-tox" v-for="(item,index) in orderList" :key="index">
            <div class="ding_dan" @click="xiangqing(item.transport.id)">
                <div class="ding">
                    <div style="font-size: 0.875rem;font-weight: bold;margin-bottom:0.2rem;">自营产品</div>
                    <span style="margin-left: 0.1rem;color: RGBA(156, 156, 158, 1)" v-cloak>订单编号 {{item.order_sn}}</span>
                </div>
                <div class="state">
                    <div style="color: RGBA(156, 156, 158, 1);margin-top: 0.8rem;font-size: 0.875rem"
                         v-if="item.transport.transportState==0">未配送
                    </div>
                    <div style="color: RGBA(156, 156, 158, 1);margin-top: 0.8rem;font-size: 0.875rem"
                         v-if="item.transport.transportState==1">配送中
                    </div>
                    <div style="color: RGBA(156, 156, 158, 1);margin-top: 0.8rem;font-size: 0.875rem"
                         v-if="item.transport.transportState==2">已配送
                    </div>
                    <div style="color: RGBA(156, 156, 158, 1);margin-top: 0.8rem;font-size: 0.875rem"
                         v-if="item.transport.transportState==3">已取消
                    </div>
                </div>
            </div>
            <div class="xiang_qing"  v-for="(goodItem,index) in item.goodsVoList" :key="index">
                <img :src="goodItem.list_pic_url"
                     width="90px" height="90px" style="margin: 0">
                <div class="ming" style="width: 30vw">
                    <div style="margin: 0;color: RGBA(114, 114, 116, 1);font-weight: bold;line-height: 1.2rem" v-cloak>
                        {{goodItem.goods_name}}
                    </div>
                    <div style="color: RGBA(156, 156, 158, 1);padding: 0.6rem" v-cloak>{{goodItem.goods_specifition_name_value}}</div>
                    <!--<span style="border-radius: 30px;background-color: RGBA(236, 242, 255, 1);padding: 0.1rem">
                <span style="margin: 0.5rem;color: RGBA(145, 157, 180, 1)">1年保修</span>
            </span>-->
                </div>
                <div class="jia" style="">
                    <div style="display: flex;flex-direction: row;text-align:right;">
                        <span style="color: RGBA(156, 156, 158, 1);margin-top: 0.2rem">优惠后</span>
                        <div style="margin: 0;font-size: 0.875rem;font-weight: bold;color:#5C5C5E" v-cloak>
                            ￥{{goodItem.retail_price}}
                        </div>
                    </div>
                    <span style="text-align:right;color: RGBA(156, 156, 158, 1)" v-cloak>￥{{goodItem.retail_price}}</span>
                    <span style="text-align:right;color: RGBA(156, 156, 158, 1);padding: 0.8rem" v-cloak>x {{goodItem.number}}</span>
                </div>
            </div>
            <div class="jin">
                <span style="margin-right: 1rem;color: RGBA(156, 156, 158, 1)" v-cloak>共 {{item.goodsCount}} 件商品</span>
                <div style="margin: 0;font-size: 0.875rem;font-weight: bold;color: #262326" v-cloak>订单金额 ￥{{item.order_price}}
                </div>
            </div>
        </div>
    </div>
</div>
<script src="statics/plugins/layer/layer.js"></script>
<script src="statics/libs/jquery.min.js"></script>
<script src="statics/libs/vue.min.js"></script>
<script src="statics/libs/iview.min.js"></script>
<script src="statics/libs/bootstrap.min.js"></script>
<script src="statics/plugins/slimscroll/jquery.slimscroll.min.js"></script>
<script src="statics/libs/fastclick.min.js"></script>
</body>
<script type="text/javascript">
    var vm = new Vue({
        el: '#loginBox',
        data: {
            tabList: [
                {id: 5, value: "全部", active: true},
                {id: 0, value: "未配送"},
                {id: 1, value: "配送中"},
                {id: 2, value: "已配送"},
                {id: 3, value: "已取消"},
            ],
            currentTab: 5,
            orderList: [
                {
                    order_sn: "123123123",
                    transport:{
                        id:1,
                        transportState:1,
                    },
                    goodsVoList:[{
                        list_pic_url:"http://yanxuan.nosdn.127.net/1f67b1970ee20fd572b7202da0ff705d.png",
                        goods_name:"手机",
                        number:123123,
                        retail_price:"123",
                        goods_specifition_name_value:"玛瑙红;1.8m床垫*1+枕头*2",
                    }],
                    orderState: 1,
                    goodsCount: 1,
                    order_price: 1000,
                }
            ]
        },
        beforeCreate: function () {
          getOrderList(getUrlParam("type"))
        },
        methods: {
            fan(){
                parent.location.href = 'wxIndex.html';
            },
            getOrder(type){
                vm.currentTab=type
                getOrderList(type)
            },
            xiangqing(id){
                parent.location.href = 'xiangQing.html?id='+id;
            }
        }
    });

    function getOrderList(type) {
        $.ajax({
            type: "GET",
            url: "sys/transport/listByState?transportType="+0+(type=='5'||type==null||type=='null'|| type=='undefined'?"":'&transportState='+type),
            dataType: "json",
            success: function (result) {
                if(result.errno==0){
                    vm.orderList=result.data;
                    vm.currentTab=type;
                }else{
                    layer.alert("查询失败");
                }
            }
        });

    }

    function getUrlParam(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
        var r = window.location.search.substr(1).match(reg);
        if (r != null) {
            return unescape(r[2]);
        } else {
            return null;
        }
    }
</script>
</html>
